<template>
  <div>
    <h2>Music组件</h2>
    <div>
      <button
        @click="
          $router.push({
            name: 'MusicItem',
            params: {
              id: 1,
              name: '周杰伦',
            },
          })
        "
      >
        周杰伦
      </button>
      <button
        @click="
          $router.push({
            name: 'MusicItem',
            params: {
              id: 2,
              name: '林俊杰',
            },
          })
        "
      >
        林俊杰
      </button>
      <button
        @click="
          $router.push({
            name: 'MusicItem',
            params: {
              id: 3,
              name: '陈奕迅',
            },
          })
        "
      >
        陈奕迅
      </button>

      <button
        @click="
          $router.push({
            name: 'MusicItem',
            query: {
              id: 1,
              name: '周杰伦',
            },
          })
        "
      >
        周杰伦query
      </button>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Music",
  mounted() {
    // console.log("Music 初始化");
    // console.log(this.$route, "music");
  },
  beforeDestroy() {
    // console.log("Music 即将卸载");
  },
  activated() {
    // console.log("Music 组件激活");
  },
  deactivated() {
    // console.log("Music 组件失活");
  },
};
</script>

<style></style>
